<template>
  <div class="">
    <!-- 跑马灯 -->
    <Carousel />
    <!-- 搜索区域 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row :gutter="20">
      <el-col :span="20">
        <!-- 等级 -->
        <Level @getLevel="getLevel" />
        <!-- 地区 -->
        <Region @getRegion="getRegion" />
        <!-- 医院列表 -->
        <div class="hospitalCard" v-if="hasHospitalArr.length > 0">
          <Card
            class="item"
            v-for="(item, index) in hasHospitalArr"
            :key="index"
            :hospitalInfo="item"
          />
        </div>
        <el-empty description="暂无数据" v-else />
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout=" prev, pager, next,jumper , -> ,total, sizes"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 引入组合式API函数
import { onMounted, ref } from "vue";
import { reqHospital } from "@/api/home/index.ts";
// 引入组件
import Carousel from "./carousel/index.vue";
import Search from "./search/index.vue";
import Level from "./level/index.vue";
import Region from "./region/index.vue";
import Card from "./card/index.vue";
import Tip from "./tip/index.vue";

import type { Content, HospitalResponseData } from "@/api/home/type";
// 分页器页码
let pageNo = ref<number>(1);
let pageSize = ref<number>(10);
// 存储已有的医院的数据
let hasHospitalArr = ref<Content>([]);
// 存储已有医院的总个数
let total = ref<number>(0);
// 存储医院等级响应数据
let hostype = ref<string>("");
// 存储医院区域响应数据
let districtCode = ref<string>("");

// 组件挂载完毕 发一次请求
onMounted(() => {
  getHospitalInfo();
});
// 获取已有医院的数据
const getHospitalInfo = async () => {
  // 获取医院的数据：默认获取第一页，每页十条
  let result: HospitalResponseData = await reqHospital(
    pageNo.value,
    pageSize.value,
    hostype.value,
    districtCode.value
  );

  if (result.code == 200) {
    // 存储已有的医院的数据
    hasHospitalArr.value = result.data.content;
    // 存储医院的总个数
    total.value = result.data.totalElements;
  }
};

// 分页器 第几页
const handleCurrentChange = () => {
  getHospitalInfo();
};
// 分页器 每页多少条
const handleSizeChange = () => {
  getHospitalInfo();
};
// 子组件自定义事件 获取儿子给父组件传递过来得等级参数
const getLevel = (level: string) => {
  // 收集等级参数
  hostype.value = level;
  getHospitalInfo();
};
// 子组件自定义事件 获取儿子给父组件传递过来得地区参数
const getRegion = (region: string) => {
  districtCode.value = region;
  getHospitalInfo();
};
</script>

<style scoped lang="scss">
.hospitalCard {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  .item {
    width: 48%;
    margin-bottom: 20px;
  }
}
</style>
